/// 页面 * 表格

<template>
  <Page>
    <ExGrid v-bind="gridOptions" />
  </Page>
</template>

<script setup lang="tsx">
import type { ExGridProps } from '@expresso/plus'
import type { RowData } from './types'
import { rowsData } from './helper'

const gridOptions = reactive<ExGridProps<RowData>>({
  border: true,
  height: 300,
  align: null,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { type: 'seq', width: 50 },
    { field: 'name', title: 'name' },
    { field: 'sex', title: 'sex' },
    { field: 'address', title: 'Address' },
  ],
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  slots: {
    toolbar_buttons: () => (
      <>
        <button onClick={() => (gridOptions.align = 'left')}>居左</button>
        <button onClick={() => (gridOptions.align = 'center')}>居中</button>
        <button onClick={() => (gridOptions.align = 'right')}>居右</button>
      </>
    ),
  },
  data: rowsData,
})
</script>

<style scoped lang="scss"></style>
